<template>
  <div class="custom_coupon_card">
    <div
      class="custom_coupon_card_content"
      :style="{ background: card.backgroundImage }"
      v-for="(card, index) in item.data"
      :key="'couponCard_' + index"
    >
      <div class="custom_coupon_card_content_info">
        <UserInfoHead :item="card"></UserInfoHead>
      </div>
      <div class="custom_coupon_card_content_button">
        <slot name="couponCardButton" :item="card"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "couponCard",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    UserInfoHead: () =>
      import(
        /* webpackChunkName:'userInfo' */ "../../components/userInfo/userInfoHead"
      ),
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_coupon_card {
  .custom_coupon_card_content {
    margin: (10 / @base) (5 / @base);
    border-radius: (5 / @base);
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
  }
}
</style>
